console.log('画布元素拖拽')
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d');// canvas 2d 画笔

const statusConfig = {
  IDLE: 0, // 闲置即正常状态   // 矩形框被拖拽的三种状态
  DRAG_START:1,// 开始拖拽
  DRAGING:2 // 拖拽中 
}
// canvas 画布信息存存储对象
const canvasInfo = {
  status: statusConfig.IDLE,
  dragTarget: null,
  lastEvtPos:{ x:null, y:null }, // 计算上次鼠标位置 为了确定这次基于上次的偏移量是多少  以便设置阈值 大于之后才认为是拖动 而不是误触或者误点击
  offsetEvtPos: { x:null, y:null }, // 记录鼠标的实时位置相对于画布的 以便形状移动可以相对于鼠标的位置移动 而不是首先将图形的开始位置设置为鼠标当前的位置
}
// 画布不会记录上面画的内容 所以要找内容存储 画布上画的形状的信息
const rects = [];
// 绘制矩形 需要开始点坐标x y 矩形宽高 w h
const drawRect = (ctx, x, y, w, h) => {
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 2;
  ctx.rect(x ,y ,w,h);
  ctx.stroke();
  ctx.closePath();// 自动闭合至结束路径
  ctx.restore();
}

drawRect(ctx,30,30, 100, 100);
rects.push({x:30,y:30,w:100,h:100});
// 画完形状后将形状信息进行存储
drawRect(ctx, 180, 180, 200, 100,)
rects.push({x:180,y:180,w:200,h:100})
//  获取当前鼠标点位相对于画布的距离
const getCanvasPosition = e => {
  return {
    x: e.offsetX,
    y: e.offsetY
  }
}
// 计算两个点之间的距离  判断移动的长度用于阈值判定
const getDistance = (p1, p2) => {
  return Math.sqrt((p1.x - p2.x) **2 + (p1.y - p2.y) ** 2);
}
// 判断某个位置是否在矩形中
const ifInRect = pos => {
  for(let i = 0 ; i < rects.length; i++) {
    let rect = rects[i];
    if(pos.x > rect.x && pos.x < ( rect.x + rect.w) && pos.y > rect.y && pos.y < (rect.y + rect.h)) {
      // return true;
      // 需要知道是哪一个形状
      return rect;
    }
  }
  return false;
}
// 画布的事件监听
canvas.addEventListener('mousedown', e => {
  const canvasPosition = getCanvasPosition(e);
  const rectRef = ifInRect(canvasPosition)
  if(ifInRect(canvasPosition)) {
    // 鼠标事件和数据进行了关联判定
    canvasInfo.dragTarget = rectRef;
    canvasInfo.status = statusConfig.DRAG_START;
    canvasInfo.lastEvtPos = canvasPosition;
    canvasInfo.offsetEvtPos = canvasPosition;
  }
});
canvas.addEventListener('mousemove',e => {
  const canvasPosition = getCanvasPosition(e);
  // 进入到元素内进行一个可拖拽的提示
  if(ifInRect(canvasPosition)) {
    canvas.style.cursor = "all-scroll"
  } else {
    canvas.style.cursor = ''
  }
  // 确定是被按下时的拖动 不是随意的移动
  if(canvasInfo.status === statusConfig.DRAG_START && getDistance(canvasInfo.lastEvtPos, canvasPosition) > 5) {
    canvasInfo.status = statusConfig.DRAGING;
    canvasInfo.offsetEvtPos = canvasPosition; 
    console.log('try to drag')
  } else if( canvasInfo.status == statusConfig.DRAGING) {
    // canvasInfo.offsetEvtPos = canvasPosition; 
    console.log('draging');
    const { dragTarget } = canvasInfo;
    // 修改对应target 的数据 图形开始位置的变化量 等于鼠标按下时的位置和现在位置的变化量
    dragTarget.x += (canvasPosition.x - canvasInfo.offsetEvtPos.x);
    dragTarget.y += (canvasPosition.y - canvasInfo.offsetEvtPos.y);
    // 清空画布
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // 重新绘制
    rects.forEach(rect => drawRect(ctx,rect.x,rect.y,rect.w,rect.h))
    canvasInfo.offsetEvtPos = canvasPosition;
  }
})

canvas.addEventListener('mouseup', e => {
  if(canvasInfo.status === statusConfig.DRAGING || canvasInfo.status === statusConfig.DRAG_START) {
    canvasInfo.status = statusConfig.IDLE;// 恢复鼠标闲置状态
    console.log('结束')
  }
})